
<template>
    <div class="app-container">
        <!--<div v-show="">-->
        <el-tabs v-model="activeName" type="card" class="cpe_list">
            <el-tab-pane label="交换机,服务器,防火墙" name="JFF">
                <el-row :gutter="50">
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-select v-model="ft_data.dictKey" placeholder="请选择设备类型" style="width:100%" @change="watchChange($event)">
                                <el-option v-for="list in roomListData " :key="list.dictKey" :label="list.dictValue" :value="list.dictKey" :disabled="list.dictKey==5"></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-select v-model="ft_data.orderNum" placeholder="请选择设备状态" style="width:100%">
                                <el-option v-for="list in eqptSpecList" :key="list.orderNum" :label="list.dictDescribe" :value="list.orderNum"></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple" style="height:20px;"></div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-button @click="getEptRoomInfos('all')">筛选结果</el-button>
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="50">
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-input v-model="ft_data.snNum" placeholder="请输入设备SN编号"></el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <el-button type="primary" icon="search" @click="getEptRoomInfos('serarch')">搜索</el-button>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple" style="height:20px;"></div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                             <el-dropdown trigger="click" @command="UnitTypeimport">
                                    <el-button type="primary">导入</el-button>
                                                <el-dropdown-menu slot="dropdown">
                                                      <el-dropdown-item command="1">导入服务器列表</el-dropdown-item>
                                                      <el-dropdown-item command="2">导入交换机列表</el-dropdown-item>
                                                      <el-dropdown-item command="4">导入防火墙列表</el-dropdown-item>
                                                </el-dropdown-menu>
                                          </el-dropdown>
                               <!--导出-->           
                            <el-dropdown trigger="click" @command="cabinetDown">
                                <el-button type="primary">导出</el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="1">导出服务器列表</el-dropdown-item>
                                    <el-dropdown-item command="2">导出交换机列表</el-dropdown-item>
                                    <el-dropdown-item command="4">导出防火墙列表</el-dropdown-item>
                                    <el-dropdown-item command="5">导出CPE列表</el-dropdown-item>
                                    <el-dropdown-item command="6">导出服务器模版</el-dropdown-item>
                                    <el-dropdown-item command="7">导出交换机模版</el-dropdown-item>
                                    <el-dropdown-item command="8">导出防火墙模版</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <el-dropdown @command="createBrand" style="margin-left:10px;">
                                <el-button class="el-dropdown-link" type="primary">新建设备</el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="1" style="font-size:14px;">服务器</el-dropdown-item>
                                    <el-dropdown-item command="2" style="font-size:14px;">交换机</el-dropdown-item>
                                    <el-dropdown-item command="4" style="font-size:14px;">防火墙</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>

                        </div>
                    </el-col>
                </el-row>
                <!-- 设备信息表 -->
                <el-table :data="infos.pageData" border style="width: 100%;margin:20px 0">
                    <el-table-column label="序号" min-width="80px">
                        <template scope="scope">
                            <span>{{ scope.$index+1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="所处地域" min-width="180px">
                        <template scope="scope">
                            <span>{{ scope.row.areaName+'-'+scope.row.countryName+'-'+scope.row.provinceName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="机房名称" min-width="160px">
                        <template scope="scope">
                            <span>{{scope.row.roomName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="机柜名称" min-width="160px">
                        <template scope="scope">
                            <span>{{ scope.row.cabinetCode }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="机位信息" min-width="140px">
                        <template scope="scope">
                            <span>{{ "#"+scope.row.startNum+'-'+scope.row.endNum+"U" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="SN编号" min-width="180px">
                        <template scope="scope">
                            <span>{{ scope.row.snNum }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="设备名" min-width="160px">
                        <template scope="scope">
                            <span>{{ scope.row.eqptTypeName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="类型" min-width="100px">
                        <template scope="scope">
                            <span>{{ scope.row.eqptType }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" min-width="100px">
                        <template scope="scope">
                            <span>{{ scope.row.eqptStateName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="300px">
                        <template scope="scope">
                            <el-button size="small" @click="editDict(scope.row)">编辑</el-button>
                            <el-button size="small" @click="offLine(scope.row)">下架</el-button>
                            <el-button size="small" @click="detInfo(scope.row)">详情</el-button>
                            <el-button size="small" type="danger" @click="deleteConfirm(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页条 -->
                <div class="block">
                    <el-pagination style="padding:0;" @current-change="handleCurrentChange" :current-page.sync="pageConfig.curPage" :page-size=pageConfig.size layout="prev, pager, next, jumper" :total="pageConfig.total">
                    </el-pagination>
                </div>
                
                <el-dialog title="导入信息" size="small" :visible.sync="importVisible">
                    <div v-if="importVisible">
                        <dropzone id="Dropzone" :url="uploadUrl" :acceptedFileTypes="'.xls'" @vdropzone-error="showError" @vdropzone-success="showSuccess" ref="submitFiles">
                            <input type="hidden" name="token" value="xxx">
                        </dropzone>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="importVisible = false">取 消</el-button>
                        <el-button type="info" @click="submitFiles">提 交</el-button>
                    </div>
                </el-dialog>
                <!-- dialog服务器编辑框 -->
                <el-dialog :title="serverText[serverStatus]" :visible.sync="eptRoomEditVisible">
                    <el-form :model="eptRoomInfos" ref="eptRoomInfos" v-if="eptRoomEditVisible">
                        <div :data="infos.tableData">
                            <el-form-item label="sn编号">
                                <template scope="scope">
                                    <span>{{eptRoomInfos.snNum}}</span>
                                </template>
                            </el-form-item>
                        </div>
                        <el-form-item label="设备状态" :label-width="formLabelWidth">
                            <el-select v-model="eptRoomInfos.state">
                                <el-option label="使用中" value="1"></el-option>
                                <el-option label="空闲" value="2"></el-option>
                                <el-option label="下线" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="机房" :label-width="formLabelWidth">
                            <el-select v-model="eptRoomInfos.roomId" @change="a">
                                <el-option v-for="roomList in getRoomInfoLists" :key="roomList.roomId" :label="roomList.roomName" :value="roomList.roomId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="机柜编号" :label-width="formLabelWidth">
                            <el-select v-model="eptRoomInfos.cabinetCode">
                                <el-option v-for="cabinetList in getCabinetInfoLists" :key="cabinetList.cabinetId" :label="cabinetList.cabinetCode" :value="cabinetList.cabinetId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="起始U位" :label-width="formLabelWidth">
                            <el-select v-model="eptRoomInfos.startNum">
                                <!--<el-option v-for="uList in getCabinetInfoLists" :key="uList.placeNum" :label="uList.placeNum" :value="uList.placeNum"></el-option>-->
                                <el-option label="1" value="1"></el-option>
                                <el-option label="2" value="2"></el-option>
                                <el-option label="3" value="3"></el-option>
                                <el-option label="4" value="4"></el-option>
                                <el-option label="5" value="5"></el-option>
                                <el-option label="6" value="6"></el-option>
                                <el-option label="7" value="7"></el-option>
                                <el-option label="8" value="8"></el-option>
                                <el-option label="9" value="9"></el-option>
                                <el-option label="1" value="10"></el-option>
                                <el-option label="2" value="11"></el-option>
                                <el-option label="3" value="12"></el-option>
                                <el-option label="3" value="13"></el-option>
                                <el-option label="4" value="14"></el-option>
                                <el-option label="5" value="15"></el-option>
                                <el-option label="6" value="16"></el-option>
                                <el-option label="7" value="17"></el-option>
                                <el-option label="8" value="18"></el-option>
                                <el-option label="9" value="19"></el-option>
                                <el-option label="1" value="20"></el-option>
                                <el-option label="1" value="21"></el-option>
                                <el-option label="2" value="22"></el-option>
                                <el-option label="3" value="23"></el-option>
                                <el-option label="4" value="24"></el-option>
                                <el-option label="5" value="25"></el-option>
                                <el-option label="6" value="26"></el-option>
                                <el-option label="7" value="27"></el-option>
                                <el-option label="8" value="28"></el-option>
                                <el-option label="9" value="29"></el-option>
                                <el-option label="10" value="10"></el-option>
                                <el-option label="11" value="11"></el-option>
                                <el-option label="12" value="12"></el-option>
                                <el-option label="13" value="13"></el-option>
                                <el-option label="14" value="14"></el-option>
                                <el-option label="15" value="15"></el-option>
                                <el-option label="16" value="16"></el-option>
                                <el-option label="17" value="17"></el-option>
                                <el-option label="18" value="18"></el-option>
                                <el-option label="19" value="19"></el-option>
                                <el-option label="20" value="20"></el-option>
                                <el-option label="21" value="21"></el-option>
                                <el-option label="22" value="22"></el-option>
                                <el-option label="23" value="23"></el-option>
                                <el-option label="24" value="24"></el-option>
                                <el-option label="25" value="25"></el-option>
                                <el-option label="26" value="26"></el-option>
                                <el-option label="27" value="27"></el-option>
                                <el-option label="28" value="28"></el-option>
                                <el-option label="29" value="29"></el-option>
                                <el-option label="30" value="30"></el-option>
                                <el-option label="31" value="31"></el-option>
                                <el-option label="32" value="32"></el-option>
                                <el-option label="33" value="33"></el-option>
                                <el-option label="34" value="34"></el-option>
                                <el-option label="35" value="35"></el-option>
                                <el-option label="36" value="36"></el-option>
                                <el-option label="37" value="37"></el-option>
                                <el-option label="38" value="38"></el-option>
                                <el-option label="39" value="39"></el-option>
                                <el-option label="40" value="40"></el-option>
                                <el-option label="41" value="41"></el-option>
                                <el-option label="42" value="42"></el-option>
                                <el-option label="43" value="43"></el-option>
                                <el-option label="44" value="44"></el-option>
                                <el-option label="45" value="45"></el-option>
                                <el-option label="46" value="46"></el-option>
                                <el-option label="47" value="47"></el-option>
                                <el-option label="48" value="48"></el-option>
                                <el-option label="49" value="49"></el-option>
                                <el-option label="50" value="50"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="结束U位" :label-width="formLabelWidth">
                            <el-select v-model="eptRoomInfos.endNum">
                                <el-option label="1" value="1"></el-option>
                                <el-option label="2" value="2"></el-option>
                                <el-option label="3" value="3"></el-option>
                                <el-option label="4" value="4"></el-option>
                                <el-option label="5" value="5"></el-option>
                                <el-option label="6" value="6"></el-option>
                                <el-option label="7" value="7"></el-option>
                                <el-option label="8" value="8"></el-option>
                                <el-option label="9" value="9"></el-option>
                                <el-option label="1" value="10"></el-option>
                                <el-option label="2" value="11"></el-option>
                                <el-option label="3" value="12"></el-option>
                                <el-option label="3" value="13"></el-option>
                                <el-option label="4" value="14"></el-option>
                                <el-option label="5" value="15"></el-option>
                                <el-option label="6" value="16"></el-option>
                                <el-option label="7" value="17"></el-option>
                                <el-option label="8" value="18"></el-option>
                                <el-option label="9" value="19"></el-option>
                                <el-option label="1" value="20"></el-option>
                                <el-option label="1" value="21"></el-option>
                                <el-option label="2" value="22"></el-option>
                                <el-option label="3" value="23"></el-option>
                                <el-option label="4" value="24"></el-option>
                                <el-option label="5" value="25"></el-option>
                                <el-option label="6" value="26"></el-option>
                                <el-option label="7" value="27"></el-option>
                                <el-option label="8" value="28"></el-option>
                                <el-option label="9" value="29"></el-option>
                                <el-option label="10" value="10"></el-option>
                                <el-option label="11" value="11"></el-option>
                                <el-option label="12" value="12"></el-option>
                                <el-option label="13" value="13"></el-option>
                                <el-option label="14" value="14"></el-option>
                                <el-option label="15" value="15"></el-option>
                                <el-option label="16" value="16"></el-option>
                                <el-option label="17" value="17"></el-option>
                                <el-option label="18" value="18"></el-option>
                                <el-option label="19" value="19"></el-option>
                                <el-option label="20" value="20"></el-option>
                                <el-option label="21" value="21"></el-option>
                                <el-option label="22" value="22"></el-option>
                                <el-option label="23" value="23"></el-option>
                                <el-option label="24" value="24"></el-option>
                                <el-option label="25" value="25"></el-option>
                                <el-option label="26" value="26"></el-option>
                                <el-option label="27" value="27"></el-option>
                                <el-option label="28" value="28"></el-option>
                                <el-option label="29" value="29"></el-option>
                                <el-option label="30" value="30"></el-option>
                                <el-option label="31" value="31"></el-option>
                                <el-option label="32" value="32"></el-option>
                                <el-option label="33" value="33"></el-option>
                                <el-option label="34" value="34"></el-option>
                                <el-option label="35" value="35"></el-option>
                                <el-option label="36" value="36"></el-option>
                                <el-option label="37" value="37"></el-option>
                                <el-option label="38" value="38"></el-option>
                                <el-option label="39" value="39"></el-option>
                                <el-option label="40" value="40"></el-option>
                                <el-option label="41" value="41"></el-option>
                                <el-option label="42" value="42"></el-option>
                                <el-option label="43" value="43"></el-option>
                                <el-option label="44" value="44"></el-option>
                                <el-option label="45" value="45"></el-option>
                                <el-option label="46" value="46"></el-option>
                                <el-option label="47" value="47"></el-option>
                                <el-option label="48" value="48"></el-option>
                                <el-option label="49" value="49"></el-option>
                                <el-option label="50" value="50"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="设备用途" :label-width="formLabelWidth">
                            <el-input v-model="eptRoomInfos.purpose" auto-complete="off" :disabled="this.eptRoomInfos.state==='1'?false:true"></el-input>
                        </el-form-item>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="IPMI地址" :label-width="formLabelWidth">
                                        <el-input v-model="eptRoomInfos.ipmiAddr" auto-complete="off" ></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="管理网地址" :label-width="formLabelWidth">
                                        <el-input v-model="eptRoomInfos.manageIp" auto-complete="off" :disabled="this.eptRoomInfos.state==='1'?false:true"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="系统型号" :label-width="formLabelWidth">
                                        <el-input v-model="eptRoomInfos.sysModel" auto-complete="off" :disabled="this.eptRoomInfos.state==='1'?false:true"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="主机名" :label-width="formLabelWidth">
                                        <el-input v-model="eptRoomInfos.hostName" auto-complete="off" :disabled="this.eptRoomInfos.state==='1'?false:true"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="IP1" :label-width="formLabelWidth">
                                        <el-input v-model="eptRoomInfos.ip1" auto-complete="off" :disabled="this.eptRoomInfos.state==='1'?false:true"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="IP2" :label-width="formLabelWidth">
                                        <el-input v-model="eptRoomInfos.ip2" auto-complete="off" :disabled="this.eptRoomInfos.state==='1'?false:true"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="IP3" :label-width="formLabelWidth">
                                        <el-input v-model="eptRoomInfos.ip3" auto-complete="off" :disabled="this.eptRoomInfos.state==='1'?false:true"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="IP4" :label-width="formLabelWidth">
                                        <el-input v-model="eptRoomInfos.ip4" auto-complete="off" :disabled="this.eptRoomInfos.state==='1'?false:true"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="eptRoomEditVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitForm('eptRoomInfos',eptRoomInfos.type)">确 定</el-button>
                    </div>
                </el-dialog>
                <!-- dialog交换机编辑框 -->
                <el-dialog title="编辑设备状态" :visible.sync="JHeptRoomEditVisible">
                    <el-form :model="JHeptRoomInfos" ref="JHeptRoomInfos" v-if="JHeptRoomEditVisible">
                        <div :data="infos.tableData">
                            <el-form-item label="sn编号">
                                <template scope="scope">
                                    <span>{{JHeptRoomInfos.snNum}}</span>
                                </template>
                            </el-form-item>
                        </div>
                        <el-form-item label="设备状态" :label-width="formLabelWidth">
                            <el-select v-model="JHeptRoomInfos.state">
                                <el-option label="使用中" value="1"></el-option>
                                <el-option label="空闲" value="2"></el-option>
                                <el-option label="下线" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="机房" :label-width="formLabelWidth">
                            <el-select v-model="JHeptRoomInfos.roomId">
                                <el-option v-for="roomList in getRoomInfoLists" :key="roomList.roomId" :label="roomList.roomName" :value="roomList.roomId"></el-option>
                            </el-select>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="机柜编号" :label-width="formLabelWidth">
                            <el-select v-model="JHeptRoomInfos.cabinetCode">
                                <el-option v-for="cabinetList in getCabinetInfoLists" :key="cabinetList.cabinetId" :label="cabinetList.cabinetCode" :value="cabinetList.cabinetId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="起始U位" :label-width="formLabelWidth">
                            <el-select v-model="JHeptRoomInfos.startNum">
                                <el-option label="1" value="1"></el-option>
                                <el-option label="2" value="2"></el-option>
                                <el-option label="3" value="3"></el-option>
                                <el-option label="4" value="4"></el-option>
                                <el-option label="5" value="5"></el-option>
                                <el-option label="6" value="6"></el-option>
                                <el-option label="7" value="7"></el-option>
                                <el-option label="8" value="8"></el-option>
                                <el-option label="9" value="9"></el-option>
                                <el-option label="1" value="10"></el-option>
                                <el-option label="2" value="11"></el-option>
                                <el-option label="3" value="12"></el-option>
                                <el-option label="3" value="13"></el-option>
                                <el-option label="4" value="14"></el-option>
                                <el-option label="5" value="15"></el-option>
                                <el-option label="6" value="16"></el-option>
                                <el-option label="7" value="17"></el-option>
                                <el-option label="8" value="18"></el-option>
                                <el-option label="9" value="19"></el-option>
                                <el-option label="1" value="20"></el-option>
                                <el-option label="1" value="21"></el-option>
                                <el-option label="2" value="22"></el-option>
                                <el-option label="3" value="23"></el-option>
                                <el-option label="4" value="24"></el-option>
                                <el-option label="5" value="25"></el-option>
                                <el-option label="6" value="26"></el-option>
                                <el-option label="7" value="27"></el-option>
                                <el-option label="8" value="28"></el-option>
                                <el-option label="9" value="29"></el-option>
                                <el-option label="10" value="10"></el-option>
                                <el-option label="11" value="11"></el-option>
                                <el-option label="12" value="12"></el-option>
                                <el-option label="13" value="13"></el-option>
                                <el-option label="14" value="14"></el-option>
                                <el-option label="15" value="15"></el-option>
                                <el-option label="16" value="16"></el-option>
                                <el-option label="7" value="17"></el-option>
                                <el-option label="18" value="18"></el-option>
                                <el-option label="19" value="19"></el-option>
                                <el-option label="20" value="20"></el-option>
                                <el-option label="21" value="21"></el-option>
                                <el-option label="22" value="22"></el-option>
                                <el-option label="23" value="23"></el-option>
                                <el-option label="24" value="24"></el-option>
                                <el-option label="25" value="25"></el-option>
                                <el-option label="26" value="26"></el-option>
                                <el-option label="27" value="27"></el-option>
                                <el-option label="28" value="28"></el-option>
                                <el-option label="29" value="29"></el-option>
                                <el-option label="30" value="30"></el-option>
                                <el-option label="31" value="31"></el-option>
                                <el-option label="32" value="32"></el-option>
                                <el-option label="33" value="33"></el-option>
                                <el-option label="34" value="34"></el-option>
                                <el-option label="35" value="35"></el-option>
                                <el-option label="36" value="36"></el-option>
                                <el-option label="37" value="37"></el-option>
                                <el-option label="38" value="38"></el-option>
                                <el-option label="39" value="39"></el-option>
                                <el-option label="40" value="40"></el-option>
                                <el-option label="41" value="41"></el-option>
                                <el-option label="42" value="42"></el-option>
                                <el-option label="43" value="43"></el-option>
                                <el-option label="44" value="44"></el-option>
                                <el-option label="45" value="45"></el-option>
                                <el-option label="46" value="46"></el-option>
                                <el-option label="47" value="47"></el-option>
                                <el-option label="48" value="48"></el-option>
                                <el-option label="49" value="49"></el-option>
                                <el-option label="50" value="50"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="结束U位" :label-width="formLabelWidth">
                            <el-select v-model="JHeptRoomInfos.endNum">
                                <el-option label="1" value="1"></el-option>
                                <el-option label="2" value="2"></el-option>
                                <el-option label="3" value="3"></el-option>
                                <el-option label="4" value="4"></el-option>
                                <el-option label="5" value="5"></el-option>
                                <el-option label="6" value="6"></el-option>
                                <el-option label="7" value="7"></el-option>
                                <el-option label="8" value="8"></el-option>
                                <el-option label="9" value="9"></el-option>
                                <el-option label="1" value="10"></el-option>
                                <el-option label="2" value="11"></el-option>
                                <el-option label="3" value="12"></el-option>
                                <el-option label="3" value="13"></el-option>
                                <el-option label="4" value="14"></el-option>
                                <el-option label="5" value="15"></el-option>
                                <el-option label="6" value="16"></el-option>
                                <el-option label="7" value="17"></el-option>
                                <el-option label="8" value="18"></el-option>
                                <el-option label="9" value="19"></el-option>
                                <el-option label="1" value="20"></el-option>
                                <el-option label="1" value="21"></el-option>
                                <el-option label="2" value="22"></el-option>
                                <el-option label="3" value="23"></el-option>
                                <el-option label="4" value="24"></el-option>
                                <el-option label="5" value="25"></el-option>
                                <el-option label="6" value="26"></el-option>
                                <el-option label="7" value="27"></el-option>
                                <el-option label="8" value="28"></el-option>
                                <el-option label="9" value="29"></el-option>
                                <el-option label="10" value="10"></el-option>
                                <el-option label="11" value="11"></el-option>
                                <el-option label="12" value="12"></el-option>
                                <el-option label="13" value="13"></el-option>
                                <el-option label="14" value="14"></el-option>
                                <el-option label="15" value="15"></el-option>
                                <el-option label="16" value="16"></el-option>
                                <el-option label="7" value="17"></el-option>
                                <el-option label="18" value="18"></el-option>
                                <el-option label="19" value="19"></el-option>
                                <el-option label="20" value="20"></el-option>
                                <el-option label="21" value="21"></el-option>
                                <el-option label="22" value="22"></el-option>
                                <el-option label="23" value="23"></el-option>
                                <el-option label="24" value="24"></el-option>
                                <el-option label="25" value="25"></el-option>
                                <el-option label="26" value="26"></el-option>
                                <el-option label="27" value="27"></el-option>
                                <el-option label="28" value="28"></el-option>
                                <el-option label="29" value="29"></el-option>
                                <el-option label="30" value="30"></el-option>
                                <el-option label="31" value="31"></el-option>
                                <el-option label="32" value="32"></el-option>
                                <el-option label="33" value="33"></el-option>
                                <el-option label="34" value="34"></el-option>
                                <el-option label="35" value="35"></el-option>
                                <el-option label="36" value="36"></el-option>
                                <el-option label="37" value="37"></el-option>
                                <el-option label="38" value="38"></el-option>
                                <el-option label="39" value="39"></el-option>
                                <el-option label="40" value="40"></el-option>
                                <el-option label="41" value="41"></el-option>
                                <el-option label="42" value="42"></el-option>
                                <el-option label="43" value="43"></el-option>
                                <el-option label="44" value="44"></el-option>
                                <el-option label="45" value="45"></el-option>
                                <el-option label="46" value="46"></el-option>
                                <el-option label="47" value="47"></el-option>
                                <el-option label="48" value="48"></el-option>
                                <el-option label="49" value="49"></el-option>
                                <el-option label="50" value="50"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="设备用途" :label-width="formLabelWidth">
                            <el-input v-model="JHeptRoomInfos.purpose" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="IPMI地址" :label-width="formLabelWidth">
                                        <el-input v-model="eptRoomInfos.ipmiAddr" auto-complete="off"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="管理网地址" :label-width="formLabelWidth">
                                        <el-input v-model="eptRoomInfos.manageIp" auto-complete="off"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="系统型号" :label-width="formLabelWidth">
                                        <el-input v-model="eptRoomInfos.sysModel" auto-complete="off"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content bg-purple">
                                    <el-form-item label="主机名" :label-width="formLabelWidth">
                                        <el-input v-model="eptRoomInfos.hostName" auto-complete="off"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="JHeptRoomEditVisible = false">取 消</el-button>
                        <el-button type="primary" @click="JHsubmitForm('JHeptRoomInfos',JHeptRoomInfos.type)">确 定</el-button>
                    </div>
                </el-dialog>
                <!-- dialog防火墙编辑框 -->
                <el-dialog title="编辑设备状态" :visible.sync="FHQeptRoomEditVisible">
                    <el-form :model="FHQeptRoomInfos" ref="FHQeptRoomInfos" v-if="FHQeptRoomEditVisible">
                        <div :data="infos.tableData">
                            <el-form-item label="sn编号">
                                <template scope="scope">
                                    <span>{{FHQeptRoomInfos.snNum}}</span>
                                </template>
                            </el-form-item>
                        </div>
                        <el-form-item label="设备状态" :label-width="formLabelWidth">
                            <el-select v-model="FHQeptRoomInfos.state">
                                <el-option label="使用中" value="1"></el-option>
                                <el-option label="空闲" value="2"></el-option>
                                <el-option label="下线" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="机房" :label-width="formLabelWidth">
                            <el-select v-model="FHQeptRoomInfos.roomId">
                                <el-option v-for="roomList in getRoomInfoLists" :key="roomList.roomId" :label="roomList.roomName" :value="roomList.roomId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="机柜编号" :label-width="formLabelWidth">
                            <el-select v-model="FHQeptRoomInfos.cabinetCode">
                                <el-option v-for="cabinetList in getCabinetInfoLists" :key="cabinetList.cabinetId" :label="cabinetList.cabinetCode" :value="cabinetList.cabinetId"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="起始U位" :label-width="formLabelWidth">
                            <el-select v-model="FHQeptRoomInfos.startNum">
                                <el-option label="1" value="1"></el-option>
                                <el-option label="2" value="2"></el-option>
                                <el-option label="3" value="3"></el-option>
                                <el-option label="4" value="4"></el-option>
                                <el-option label="5" value="5"></el-option>
                                <el-option label="6" value="6"></el-option>
                                <el-option label="7" value="7"></el-option>
                                <el-option label="8" value="8"></el-option>
                                <el-option label="9" value="9"></el-option>
                                <el-option label="1" value="10"></el-option>
                                <el-option label="2" value="11"></el-option>
                                <el-option label="3" value="12"></el-option>
                                <el-option label="3" value="13"></el-option>
                                <el-option label="4" value="14"></el-option>
                                <el-option label="5" value="15"></el-option>
                                <el-option label="6" value="16"></el-option>
                                <el-option label="7" value="17"></el-option>
                                <el-option label="8" value="18"></el-option>
                                <el-option label="9" value="19"></el-option>
                                <el-option label="1" value="20"></el-option>
                                <el-option label="1" value="21"></el-option>
                                <el-option label="2" value="22"></el-option>
                                <el-option label="3" value="23"></el-option>
                                <el-option label="4" value="24"></el-option>
                                <el-option label="5" value="25"></el-option>
                                <el-option label="6" value="26"></el-option>
                                <el-option label="7" value="27"></el-option>
                                <el-option label="8" value="28"></el-option>
                                <el-option label="9" value="29"></el-option>
                                <el-option label="10" value="10"></el-option>
                                <el-option label="11" value="11"></el-option>
                                <el-option label="12" value="12"></el-option>
                                <el-option label="13" value="13"></el-option>
                                <el-option label="14" value="14"></el-option>
                                <el-option label="15" value="15"></el-option>
                                <el-option label="16" value="16"></el-option>
                                <el-option label="7" value="17"></el-option>
                                <el-option label="18" value="18"></el-option>
                                <el-option label="19" value="19"></el-option>
                                <el-option label="20" value="20"></el-option>
                                <el-option label="21" value="21"></el-option>
                                <el-option label="22" value="22"></el-option>
                                <el-option label="23" value="23"></el-option>
                                <el-option label="24" value="24"></el-option>
                                <el-option label="25" value="25"></el-option>
                                <el-option label="26" value="26"></el-option>
                                <el-option label="27" value="27"></el-option>
                                <el-option label="28" value="28"></el-option>
                                <el-option label="29" value="29"></el-option>
                                <el-option label="30" value="30"></el-option>
                                <el-option label="31" value="31"></el-option>
                                <el-option label="32" value="32"></el-option>
                                <el-option label="33" value="33"></el-option>
                                <el-option label="34" value="34"></el-option>
                                <el-option label="35" value="35"></el-option>
                                <el-option label="36" value="36"></el-option>
                                <el-option label="37" value="37"></el-option>
                                <el-option label="38" value="38"></el-option>
                                <el-option label="39" value="39"></el-option>
                                <el-option label="40" value="40"></el-option>
                                <el-option label="41" value="41"></el-option>
                                <el-option label="42" value="42"></el-option>
                                <el-option label="43" value="43"></el-option>
                                <el-option label="44" value="44"></el-option>
                                <el-option label="45" value="45"></el-option>
                                <el-option label="46" value="46"></el-option>
                                <el-option label="47" value="47"></el-option>
                                <el-option label="48" value="48"></el-option>
                                <el-option label="49" value="49"></el-option>
                                <el-option label="50" value="50"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="结束U位" :label-width="formLabelWidth">
                            <el-select v-model="FHQeptRoomInfos.endNum">
                                <el-option label="1" value="1"></el-option>
                                <el-option label="2" value="2"></el-option>
                                <el-option label="3" value="3"></el-option>
                                <el-option label="4" value="4"></el-option>
                                <el-option label="5" value="5"></el-option>
                                <el-option label="6" value="6"></el-option>
                                <el-option label="7" value="7"></el-option>
                                <el-option label="8" value="8"></el-option>
                                <el-option label="9" value="9"></el-option>
                                <el-option label="1" value="10"></el-option>
                                <el-option label="2" value="11"></el-option>
                                <el-option label="3" value="12"></el-option>
                                <el-option label="3" value="13"></el-option>
                                <el-option label="4" value="14"></el-option>
                                <el-option label="5" value="15"></el-option>
                                <el-option label="6" value="16"></el-option>
                                <el-option label="7" value="17"></el-option>
                                <el-option label="8" value="18"></el-option>
                                <el-option label="9" value="19"></el-option>
                                <el-option label="1" value="20"></el-option>
                                <el-option label="1" value="21"></el-option>
                                <el-option label="2" value="22"></el-option>
                                <el-option label="3" value="23"></el-option>
                                <el-option label="4" value="24"></el-option>
                                <el-option label="5" value="25"></el-option>
                                <el-option label="6" value="26"></el-option>
                                <el-option label="7" value="27"></el-option>
                                <el-option label="8" value="28"></el-option>
                                <el-option label="9" value="29"></el-option>
                                <el-option label="10" value="10"></el-option>
                                <el-option label="11" value="11"></el-option>
                                <el-option label="12" value="12"></el-option>
                                <el-option label="13" value="13"></el-option>
                                <el-option label="14" value="14"></el-option>
                                <el-option label="15" value="15"></el-option>
                                <el-option label="16" value="16"></el-option>
                                <el-option label="7" value="17"></el-option>
                                <el-option label="18" value="18"></el-option>
                                <el-option label="19" value="19"></el-option>
                                <el-option label="20" value="20"></el-option>
                                <el-option label="21" value="21"></el-option>
                                <el-option label="22" value="22"></el-option>
                                <el-option label="23" value="23"></el-option>
                                <el-option label="24" value="24"></el-option>
                                <el-option label="25" value="25"></el-option>
                                <el-option label="26" value="26"></el-option>
                                <el-option label="27" value="27"></el-option>
                                <el-option label="28" value="28"></el-option>
                                <el-option label="29" value="29"></el-option>
                                <el-option label="30" value="30"></el-option>
                                <el-option label="31" value="31"></el-option>
                                <el-option label="32" value="32"></el-option>
                                <el-option label="33" value="33"></el-option>
                                <el-option label="34" value="34"></el-option>
                                <el-option label="35" value="35"></el-option>
                                <el-option label="36" value="36"></el-option>
                                <el-option label="37" value="37"></el-option>
                                <el-option label="38" value="38"></el-option>
                                <el-option label="39" value="39"></el-option>
                                <el-option label="40" value="40"></el-option>
                                <el-option label="41" value="41"></el-option>
                                <el-option label="42" value="42"></el-option>
                                <el-option label="43" value="43"></el-option>
                                <el-option label="44" value="44"></el-option>
                                <el-option label="45" value="45"></el-option>
                                <el-option label="46" value="46"></el-option>
                                <el-option label="47" value="47"></el-option>
                                <el-option label="48" value="48"></el-option>
                                <el-option label="49" value="49"></el-option>
                                <el-option label="50" value="50"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="FHQeptRoomEditVisible = false">取 消</el-button>
                        <el-button type="primary" @click="FirwallSubmint('FHQeptRoomInfos',FHQeptRoomInfos.type)">确 定</el-button>
                    </div>
                </el-dialog>
                <!--服务器详情页-->
                <el-dialog title="服务器详情信息" size="small" :visible.sync="DetailedInformation">
                    <el-form :model="detailedInfos" style="margin-bottom:-30px" ref="detailedInfos" v-if="DetailedInformation">
                        <div style="font-size: 12px;">
                            <div class="grid-content" style="padding-top: 10px;padding-bottom: 10px;padding-left: 10px;"    >
                                <el-button type="primary" @click="editDict()">修改配置</el-button>
                                <el-button type="primary" @click="repair()">报修记录</el-button>
                            </div>
                            <div style="border: 1px solid #dfe6ec;">
                                <div style="padding-top: 10px;padding-bottom: 10px;padding-left: 10px;">
                                    <el-row :gutter="24" style="margin-bottom: 10px">
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'SN： ' + detailedInfos.snNum}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'设备类型： ' + detailedInfos.typeName}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'品牌： ' + detailedInfos.brandName}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'设备状态： ' + detailedInfos.state}} </el-col>
                                    </el-row>
                                    <el-row :gutter="24" style="">
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'型号： ' + detailedInfos.modelName}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'规格： ' + detailedInfos.specName}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'服务代码： ' + detailedInfos.serviceCode}} </el-col>
                                    </el-row>
                                </div>
                            </div>
                            <div style="border: 1px solid #dfe6ec;">
                                <div style="padding-top: 10px;padding-bottom: 10px;padding-left: 10px;">
                                    <el-row :gutter="24" style="padding-bottom: 10px;">
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'CPU品牌： ' + detailedInfos.brandName0}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'CPU核数： ' + detailedInfos.capacity0}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'数量： ' + detailedInfos.amount0}} </el-col>
                                    </el-row>
                                    <el-row :gutter="24" style="padding-bottom: 10px;">
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'内存品牌： ' + detailedInfos.brandName1}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'内存容量： ' + detailedInfos.capacity1}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'数量： ' + detailedInfos.amount1}} </el-col>
                                    </el-row>
                                    <el-row :gutter="24" style="padding-bottom: 10px;">
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'网卡品牌： ' + detailedInfos.brandName2}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'数量： ' + detailedInfos.amount2}} </el-col>
                                    </el-row>
                                    <el-row :gutter="24" style="padding-bottom: 10px;">
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'电源品牌： ' + detailedInfos.brandName3}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'数量： ' + detailedInfos.amount3}} </el-col>
                                    </el-row>
                                    <el-row :gutter="24" style="padding-bottom: 10px;">
                                        <el-col :xs="8" :sm="8" :md="8" :lg="8"> {{'硬盘品牌： ' + detailedInfos.brandName4}} </el-col>
                                        <el-col :xs="4" :sm="4" :md="4" :lg="4"> {{'硬盘容量： ' + detailedInfos.capacity4}} </el-col>
                                        <el-col :xs="4" :sm="4" :md="4" :lg="4"> {{'数量： ' + detailedInfos.amount4}} </el-col>
                                    </el-row>
                                    <el-row :gutter="24" style="padding-bottom: 10px;">
                                        <el-col :xs="8" :sm="8" :md="8" :lg="8"> {{'硬盘品牌： ' + detailedInfos.brandName5}} </el-col>
                                        <el-col :xs="4" :sm="4" :md="4" :lg="4"> {{'硬盘容量： ' + detailedInfos.capacity5}} </el-col>
                                        <el-col :xs="4" :sm="4" :md="4" :lg="4"> {{'数量： ' + detailedInfos.amount5}} </el-col>
                                    </el-row>
                                    <el-row :gutter="24" style="padding-bottom: 10px;">
                                        <el-col :xs="8" :sm="8" :md="8" :lg="8"> {{'硬盘品牌： ' + detailedInfos.brandName6}} </el-col>
                                        <el-col :xs="4" :sm="4" :md="4" :lg="4"> {{'硬盘容量： ' + detailedInfos.capacity6}} </el-col>
                                        <el-col :xs="4" :sm="4" :md="4" :lg="4"> {{'数量： ' + detailedInfos.amount6}} </el-col>
                                    </el-row>
                                    <el-row :gutter="24" style="padding-bottom: 10px;">
                                        <el-col :xs="8" :sm="8" :md="8" :lg="8"> {{'硬盘品牌： ' + detailedInfos.brandName7}} </el-col>
                                        <el-col :xs="4" :sm="4" :md="4" :lg="4"> {{'硬盘容量： ' + detailedInfos.capacity7}} </el-col>
                                        <el-col :xs="4" :sm="4" :md="4" :lg="4"> {{'数量： ' + detailedInfos.amount7}} </el-col>
                                    </el-row>
                                </div>
                            </div>
                            <div style="border: 1px solid #dfe6ec;">
                                <div style="padding-top: 10px;padding-bottom: 10px;padding-left: 10px;">
                                    <el-row :gutter="24" style="margin-bottom: 10px">
                                        <el-col :xs="10" :sm="10" :md="10" :lg="10"> {{'设备用途： ' + detailedInfos.purpose}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'IPMI： ' + detailedInfos.ipmiAddr}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'管理网地址： ' + detailedInfos.manageIp}} </el-col>
                                    </el-row>
                                    <el-row :gutter="24" style="margin-bottom: 10px">
                                        <el-col :xs="24" :sm="24" :md="24" :lg="24"> {{'系统型号： ' + detailedInfos.sysModel}} </el-col>
                                    </el-row>
                                    <el-row :gutter="24" style="margin-bottom: 10px">
                                        <el-col :xs="24" :sm="24" :md="24" :lg="24"> {{'主机名： ' + detailedInfos.hostName}} </el-col>
                                    </el-row>
                                    <el-row :gutter="24" style="margin-bottom: 10px">
                                        <el-col :xs="24" :sm="24" :md="24" :lg="24"> {{detailedInfos.ip0}} </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="24"> {{detailedInfos.ip1}} </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="24"> {{detailedInfos.ip2}} </el-col>
                                        <el-col :xs="24" :sm="24" :md="24" :lg="24"> {{detailedInfos.ip3}} </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </div>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="DetailedInformation = false">取 消</el-button>
                    </div>
                </el-dialog>
                <!--交换机详情页-->
                <el-dialog title="交换机详情信息" size="small" :visible.sync="JHDetailedInformation">
                    <el-form :model="JHdetailedInfos" style="margin-bottom:-30px" ref="JHdetailedInfos" v-if="JHDetailedInformation">
                            <div style="border: 1px solid #dfe6ec;">
                                 <div class="grid-content" style="padding-top: 10px;padding-bottom: 10px;padding-left: 10px;"    >
                                <el-button type="primary" @click.native.prevent="editDict()">修改配置</el-button>
                                <el-button type="primary" @click="repair()">报修记录</el-button>
                            </div>
                        <div style="font-size: 12px;">
                                <div style="border-bottom: 1px solid #dfe6ec;margin: 10px;">
                                    <el-row :gutter="24" style="margin-bottom: 10px">
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'SN：' +JHdetailedInfos.snNum}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'设备类型：' +JHdetailedInfos.typeName}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'品牌：' +JHdetailedInfos.brandName}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'设备状态：' +JHdetailedInfos.state}} </el-col>
                                    </el-row>
                                    <el-row :gutter="24" style="padding-bottom:5px">
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'型号：' +JHdetailedInfos.modelName}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'规格：' +JHdetailedInfos.specName}} </el-col>
                                    </el-row>
                                </div>
                                <div style="border-bottom: 1px solid #dfe6ec;margin: 10px;">
                                    <el-row :gutter="24" style="margin-bottom: 10px">
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'接口数量：' +JHdetailedInfos.interfaceNum}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'40G口：' +JHdetailedInfos.g40Num}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'光模块：' +JHdetailedInfos.moduleNum}} </el-col>
                                    </el-row>
                                </div>
                                <div style="margin: 10px;">
                                    <el-row :gutter="24" style="margin-bottom: 10px">
                                        <el-col :xs="12" :sm="12" :md="12" :lg="12"> {{'设备用途：' +JHdetailedInfos.purpose}} </el-col>
                                        <el-col :xs="12" :sm="12" :md="12" :lg="12"> {{'主机名称：' + JHdetailedInfos.hostName}} </el-col>
                                    </el-row>
                                    <el-row :gutter="24" style="margin-bottom: 10px">
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'管理网地址：' + JHdetailedInfos.manageIp}} </el-col>
                                    </el-row>
                                </div>
                            </div>
                            <div style="margin: 5px;">
                                <el-row :gutter="24" style="margin: 0px">
                                    <el-col :xs="6" :sm="6" :md="6" :lg="6"> 接口使用情况 ：</el-col>
                                    <el-col :xs="18" :sm="18" :md="18" :lg="18">
                                        <el-row :gutter="18" style="margin: 0px">
                                            <el-col :xs="1" :sm="1" :md="1" :lg="1">
                                                <div class="cell_box1 cell_box-up1">
                                                </div>
                                            </el-col>
                                            <el-col :xs="4" :sm="4" :md="4" :lg="4">
                                                UP：15
                                            </el-col>
                                            <el-col :xs="1" :sm="1" :md="1" :lg="1">
                                                <div class="cell_box1 cell_box-down1">
                                                </div>
                                            </el-col>
                                            <el-col :xs="4" :sm="4" :md="4" :lg="4">
                                                DOWN：15
                                            </el-col>
                                            <el-col :xs="1" :sm="1" :md="1" :lg="1">
                                                <div class="cell_box1 cell_box-unplugin1">
                                                </div>
                                            </el-col>
                                            <el-col :xs="8" :sm="8" :md="8" :lg="8">
                                                UNPLUGIN：15
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                </el-row>
                            </div>
                            <div style="border: 1px solid #dfe6ec;">
                                <div style="margin: 10px;">
                                    <port-state :portsData="JHdetailedInfos.infos" @sendMsg="sendMsg" :cellRows="2"></port-state>
                                </div>
                            </div>
                            <div style="border: 1px solid #dfe6ec;font-size: 16px;">
                                <div style="margin: 10px;">
                                    <el-row :gutter="24" style="margin: 0px">
                                        <el-col :xs="4" :sm="4" :md="4" :lg="4"> 接口用途 ：</el-col>
                                        <el-col :xs="14" :sm="14" :md="14" :lg="14">
                                            <div>
                                                <span v-if="!updateFlag"> {{!currentInterface || currentInterface.purpose === '' ?'无' : currentInterface.purpose}}</span>
                                                <el-input v-else v-model="currentInterface.purpose" style="height:16px"></el-input>
                                            </div>
                                        </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6">
                                            <el-button v-if="!updateFlag" @click.native.prevent="update()" size="" style="padding: 5px 7px" :disabled="!currentInterface || currentInterface.state ==='3'?true:false">
                                                修改
                                            </el-button>
                                            <el-row :gutter="24" style="margin: 0px" v-else>
                                                <el-col :xs="12" :sm="12" :md="12" :lg="12">
                                                    <el-button @click.native.prevent="updateSubmit()" size="" style="padding: 5px 7px">
                                                        确定
                                                    </el-button>
                                                </el-col>
                                                <el-col :xs="12" :sm="12" :md="12" :lg="12">
                                                    <el-button @click.native.prevent="updateFlag = false;" size="" style="padding: 5px 7px">
                                                        取消
                                                    </el-button>
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </div>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="JHDetailedInformation = false">取 消</el-button>
                    </div>
                </el-dialog>
                <!-- 防火墻詳情頁-->
                <el-dialog title="防火墻详情信息" size="small" :visible.sync="FirWallDetailedInformation">
                    <el-form :model="firWalldetailedInfos" style="margin-bottom:-30px" ref="firWalldetailedInfos" v-if="FirWallDetailedInformation">
                        <div style="font-size: 12px;">
                            <div class="grid-content" style="padding-top: 10px;padding-bottom: 10px;padding-left: 10px;"    >
                                <el-button type="primary" @click="editDict()">修改配置</el-button>
                                <el-button type="primary" @click="repair()">报修记录</el-button>
                            </div> 
                            <div style="border: 1px solid #dfe6ec;">
                                <div style="padding-top: 20px;padding-bottom: 20px;padding-left: 20px;">
                                    <el-row :gutter="24" style="">
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'SN：' + firWalldetailedInfos.snNum}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'设备类型：' + firWalldetailedInfos.typeName}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'品牌：' + firWalldetailedInfos.brandName}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'设备状态：' + firWalldetailedInfos.state}} </el-col>
                                    </el-row>
                                    <el-row :gutter="24" style="">
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'型号：' + firWalldetailedInfos.modelName}} </el-col>
                                        <el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'规格：' + firWalldetailedInfos.specName}} </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </div>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="FirWallDetailedInformation = false">取 消</el-button>
                    </div>
                </el-dialog>
                <server-manage ref="serverManage" :show="command === '1'"></server-manage>
                <switch-manage ref="switchManage" :show="command === '2'"></switch-manage>
                <firewall-manage ref="firewallManage" :show="command === '4'"></firewall-manage>
            </el-tab-pane>
            <el-tab-pane label="CPE" name="CPE">
                <equipManage-cpe @changeType="changeType"></equipManage-cpe>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import Dropzone from '@/components/Drop-zone';
import serverManage from './serverManage.vue';
import switchManage from './switchManage.vue';
import firewallManage from './firewallManage.vue';
import equipManageCpe from './equipManageCpe.vue';
import PortState from '@/components/Port-state';

export default {
    components: {
        PortState,
        Dropzone,
        serverManage,
        switchManage,
        firewallManage,
        equipManageCpe

    },
    data() {
        return {
            //新加入
            currentInterface: null,
            updateFlag: false,
            //是否切换到cpe页面
            activeName: 'JFF',
            type: 'Update',
            manageInfo: {},
            infos: {
                tableData: [],
                re_tableData: [],
                pageData: []
            },
            //获取机房列表
            getRoomInfoList: [],
            //获取机柜列表
            getCabinetLists: [],
            roomListData: [],
            command: '0',
            roomListData: [],
            eqpt_typeList: [],
            brandNameList: [],
            specNameList: [],
            eqptSpecList: [],
            modelList: [],
            inputWidth: {
                width: '96%'
            },
            formLabelWidth: '100px',
            eptRoomEditVisible: false,
            serverStatus: '',
            serverText: {
                update: '编辑服务器基础信息',
                create: '新建服务器基础信息'
            },
            // 编辑信息
            eptRoomInfos: {
                state: '',
                snNum: '',
                roomId: '',
                roomName: '',
                cabinetCode: '',
                startNum: '',
                endNum: '',
                purpose: '',
                ipmiAddr: '',
                manageIp: '',
                sysModel: '',
                hostName: '',
                ip1: '',
                ip2: '',
                ip3: '',
                ip4: '',
            },
            JHeptRoomInfos: {
                state: '',
                snNum: '',
                roomId: '',
                cabinetCode: '',
                startNum: '',
                endNum: '',
                purpose: '',
                ipmiAddr: '',
                manageIp: '',
                sysModel: '',
                hostName: '',
            },
            FHQeptRoomInfos: {
                state: '',
                snNum: '',
                roomId: '',
                roomName: '',
                cabinetCode: '',
                startNum: '',
                endNum: '',
            },
            //服务器详情信息
            detailedInfos: {
                snNum: '',
                typeName: '',
                brandName: '',
                modelName: '',
                serviceCode: '',
                brandName0: '',
                amount0: '',
                capacity0: '',
                brandName1: '',
                amount1: '',
                capacity1: '',
                brandName2: '',
                amount2: '',
                capacity2: '',
                brandName3: '',
                amount3: '',
                typeName4: '',
                brandName4: '',
                amount4: '',
                typeName5: '',
                brandName5: '',
                amount5: '',
                typeName6: '',
                brandName6: '',
                amount6: '',
                typeName7: '',
                brandName7: '',
                amount7: '',
                hostName: '',
                purpose: '',
                ipmiAddr: '',
                managerIp: '',
                sysModel: '',
                ip0: '',
                ip1: '',
                ip2: '',
            },
            //交换机详情
            JHdetailedInfos: {
                snNum: '',
            },
            //防火墙详情 
            firWalldetailedInfos: {
                snNum: '',
            },
            // 模态框状态
            eptRoomEditVisible: false,
            JHeptRoomEditVisible: false,
            FHQeptRoomEditVisible: false,
            DetailedInformation: false,
            JHDetailedInformation: false,
            FirWallDetailedInformation: false,
            importServer: false,
            pageConfig: {
                curPage: 1,
                total: null,
                size: 6,
            },
            importVisible: false,
            uploadUrl: '',
            // 筛选用区域信息
            ft_data: {
                dictKey: '',
                dictValue: '',
                orderNum: '',
                snNum: ''
            },
        }
    },
    created() {
        // 当前页面table展示信息
        this.getEptRoomInfos('all');
        // 设备类型列表
        this.getDictInfo();
        //获取机房列表
        this.getRoomInfoLists();
        //获取机柜列表
        this.getCabinetInfoLists();
        //设备状态
        this.eqptState();
   
    },
    methods: {
        sendMsg: function(val) {
            this.updateFlag = false;
            this.currentInterface = val;
        },
        update: function() {
            this.updateFlag = true;
        },
        showWarning: function(msg, title) {
            this.$alert(msg, title, {
                showConfirmButton: false,
                showCancelButton: true,
                cancelButtonText: '关闭',
                type: 'warning'
            });
        },
        showSuccess: function(msg, title) {
            this.$alert(msg, title, {
                showConfirmButton: true,
                showCancelButton: false,
                confirmButtonText: '确定',
                type: 'success',
                callback: action => {
                    this.show = false;
                }
            });
        },
        updateSubmit: function() {
            let _url = '';
            _url += '/resman/device/switch/Purpose';
            this.$http.put(_url, this.currentInterface)
                .then((response) => {
                    if (response.code === 0) {
                        this.showSuccess('操作已成功', '');
                        this.updateFlag = false;
                    } else {
                        this.showWarning(response.msg, '创建失败');
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },
        //页面切换相关
        changeType(val) {
            this.isShowCpe = false;
            this.ft_data.dictKey = val.toString();
        },
        watchChange(val) {
            if (val == 5) { this.isShowCpe = true; }
        },

        //导出
        cabinetDown(command) {
            if (command === '1') {
                window.location.href = process.env.BASE_API + '/resman/device/server/export';
            } else if (command === '6') {
                window.location.href = process.env.BASE_API + '/resman/device/server/exportTemplate';
            } else if (command === '2') {
                window.location.href = process.env.BASE_API + '/resman/device/switch/exportInfo';
            } else if (command === '7') {
                window.location.href = process.env.BASE_API + '/resman/device/switch/exportTemplate';
            } else if (command === '4') {
                window.location.href = process.env.BASE_API + '/resman/device/fire/export';
            } else if (command === '8') {
                window.location.href = process.env.BASE_API + '/resman/device/fire/exportTemplate';
            }
        },
        //导入
         UnitTypeimport(command) {
                  this.importVisible=true;
                  if (command === '1') {
                        this.uploadUrl = process.env.BASE_API + '/resman/device/server/import';
                  } else if (command === '2') {
                        this.uploadUrl = process.env.BASE_API + '/resman/device/switch/importInfo';
                  } else if (command === '4') {
                        this.uploadUrl = process.env.BASE_API + '/resman/device/fire/import';
                  } 
            },
           showSuccess(file, response, e) {
                  this.showMessage('文件 ' + file.name + ' 上传成功!', 'success');
                        // this.inPageTemp.eqptType = '';
                        // this.inPageTemp.brandId = '';
                       this.getEptRoomInfos('all');

                  setTimeout(() => {
                        this.$refs.submitFiles.removeFile(file);
                  }, 3000);
            },
            showError(file, error, xhr) {
                  const h = this.$createElement;
                  this.$msgbox({
                        title: '警告',
                        message: h('p', null, [
                              h('p', null, '文件 : ' + file.name + ' 上传失败 !'),
                              h('p', { style: 'color: red;margin-top:0.2em' }, '错误 : ' + error),
                        ]),
                        type: 'warning',
                        confirmButtonText: '确定',
                  })
            },
            submitFiles() {
                  this.$refs.submitFiles.enqueueFiles();
            },
        //获取机房列表
        getRoomInfoLists() {
            this.$http.get('http://10.247.3.29:5001/sys/room/list/0/0/0/0').then((response) => {
                if (response.code === 0) {
                    console.log(response)
                    this.getRoomInfoLists = response.data;
                } else {
                    console.log(response.statusText)
                }
            }).catch((response) => {
                console.log(response)
            })
        },
        //获取机柜列表
        getCabinetInfoLists() {
            this.$http.get('/resman/cabinet/list/0/0/0/0/0/0/2').then((response) => {
                if (response.code === 0) {
                    console.log(response)
                    this.getCabinetInfoLists = response.data;
                } else {
                    console.log(response.statusText)
                }
            }).catch((response) => {
                console.log(response)
            })
        },
        // 获取当前页面table展示信息
        getEptRoomInfos(type) {
            let dKey = this.ft_data.dictKey === '' ? '-1' : this.ft_data.dictKey;
            let dState = this.ft_data.orderNum === '' ? '-1' : this.ft_data.orderNum;
            this.listLoading = true;
            let _url = this.serverConfig.get('url') + '/resman/device/location/' + dKey + '/' + dState;
            this.$http.get(_url)
                .then((response) => {
                    console.log(123)
                    console.log(response)
                    if (response.code === 0) {
                        if (type === 'all') {
                            this.ft_data.snNum = "";
                            this.infos.tableData = this.infos.re_tableData = response.data;
                        } else {
                            this.infos.tableData = this.infos.re_tableData = response.data.filter(item => {
                                return item.snNum.indexOf(this.ft_data.snNum) > -1
                            })
                        }
                        this.listLoading = false;
                        this.pageConfig.total = this.infos.re_tableData.length;
                        this.pageChange(this.pageConfig.curPage);
                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },
        //新建
        createBrand(command) {
            if (command == 5) {
                this.resetForm();
                this.typeList();
                this.brandName();
                this.specName();
                this.eqptState();
                this.addManage5 = true;
            }
            if (command === '1') {
                this.command = '1';
                this.$refs['serverManage'].show = true;
            } else if (command === '2') {
                this.command = '2';
                this.$refs['switchManage'].show = true;
            } else if (command === '4') {
                this.command = '4';
                this.$refs['firewallManage'].show = true;
            }
        },
        //编辑设备
        editDict: function(row) {
            
            if (row.eqptType === '1') {
                this.$http.get('resman/device/location/' + row.deviceId).then((response) => {
                    console.log(response)
                    if (response.code === 0) {
                        this.resetForm();
                        //device_base      
                        this.eptRoomInfos.deviceId = response.data.device_base.deviceId;
                        this.eptRoomInfos.brandName = response.data.device_base.brandName;
                        this.eptRoomInfos.eqptSpec = response.data.device_base.eqptSpec;
                        this.eptRoomInfos.eqptType = response.data.device_base.eqptType;
                        this.eptRoomInfos.modelId = response.data.device_base.modelId;
                        this.eptRoomInfos.modelName = response.data.device_base.modelName;
                        this.eptRoomInfos.typeName = response.data.device_base.typeName;
                        this.eptRoomInfos.snNum = response.data.device_base.snNum;
                        this.eptRoomInfos.state = response.data.device_base.state;
                        console.log(this.eptRoomInfos.state)

                        //device_location
                        this.eptRoomInfos.cabinetId = response.data.device_location.cabinetId;
                        this.eptRoomInfos.remarks = response.data.device_location.remarks;
                        this.eptRoomInfos.state = response.data.device_location.state;
                        this.eptRoomInfos.roomId = response.data.device_location.roomId;
                        this.eptRoomInfos.roomName = response.data.device_location.roomName;
                        this.eptRoomInfos.cabinetCode = response.data.device_location.cabinetCode;
                        this.eptRoomInfos.startNum = response.data.device_location.startNum;
                        this.eptRoomInfos.endNum = response.data.device_location.endNum;

                        //device_server
                        this.eptRoomInfos.serviceCode = response.data.device_server.serviceCode;
                        this.eptRoomInfos.purpose = response.data.device_server.purpose;
                        this.eptRoomInfos.ipmiAddr = response.data.device_server.ipmiAddr;
                        this.eptRoomInfos.manageIp = response.data.device_server.manageIp;
                        this.eptRoomInfos.sysModel = response.data.device_server.sysModel;
                        this.eptRoomInfos.hostName = response.data.device_server.hostName;

                        //devcie_IP
                        this.eptRoomInfos.useTag1 = response.data.device_ip[0].useTag;
                        this.eptRoomInfos.id1 = response.data.device_ip[0].id;
                        this.eptRoomInfos.ip1 = response.data.device_ip[0].ip;
                        this.eptRoomInfos.ip2 = response.data.device_ip[1].ip;
                        this.eptRoomInfos.useTag2 = response.data.device_ip[1].useTag;
                        this.eptRoomInfos.id2 = response.data.device_ip[1].id;
                        this.eptRoomInfos.ip3 = response.data.device_ip[2].ip;
                        this.eptRoomInfos.useTag3 = response.data.device_ip[2].useTag;
                        this.eptRoomInfos.id3 = response.data.device_ip[2].id;
                        // this.eptRoomInfos.ip4 = response.data.device_ip[3].ip;
                        //  this.eptRoomInfos.useTag4 = response.data.device_ip[3].useTag;
                        // this.eptRoomInfos.id4 = response.data.device_ip[3].id;
                        this.serverStatus = 'update';
                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
                // this.resetForm();
                this.eptRoomEditVisible = true;
            } else if (row.eqptType === '2') {
                this.$http.get('resman/device/location/' + row.deviceId).then((response) => {
                    console.log(response)
                    if (response.code === 0) {
                        console.log(response)
                        //device_base
                        this.JHeptRoomInfos.snNum = response.data.device_base.snNum;
                        this.JHeptRoomInfos.state = response.data.device_base.state;
                        this.JHeptRoomInfos.brandId = response.data.device_base.brandId;
                        this.JHeptRoomInfos.brandName = response.data.device_base.brandName;
                        this.JHeptRoomInfos.deviceId = response.data.device_base.deviceId;
                        this.JHeptRoomInfos.eqptSpec = response.data.device_base.eqptSpec;
                        this.JHeptRoomInfos.eqptType = response.data.device_base.eqptType;
                        this.JHeptRoomInfos.modelId = response.data.device_base.modelId;
                        this.JHeptRoomInfos.modelName = response.data.device_base.modelName;
                        this.JHeptRoomInfos.specName = response.data.device_base.specName;
                        this.JHeptRoomInfos.typeName = response.data.device_base.typeName;

                        //device_location
                        this.JHeptRoomInfos.roomId = response.data.device_location.roomId;
                        this.JHeptRoomInfos.cabinetCode = response.data.device_location.cabinetCode;
                        this.JHeptRoomInfos.startNum = response.data.device_location.startNum;
                        this.JHeptRoomInfos.endNum = response.data.device_location.endNum;
                        this.JHeptRoomInfos.cabinetId = response.data.device_location.cabinetId;
                        this.JHeptRoomInfos.deviceId = response.data.device_location.deviceId;
                        this.JHeptRoomInfos.remarks = response.data.device_location.remarks;
                        this.JHeptRoomInfos.roomName = response.data.device_location.roomName;
                        this.JHeptRoomInfos.snNum = response.data.device_location.snNum;
                        this.JHeptRoomInfos.state = response.data.device_location.state;

                        //device_switch
                        this.JHeptRoomInfos.purpose = response.data.device_switch.purpose;
                        this.JHeptRoomInfos.deviceId = response.data.device_switch.deviceId;
                        this.JHeptRoomInfos.manageIp = response.data.device_switch.manageIp;
                        this.JHeptRoomInfos.hostName = response.data.device_switch.hostName;
                        this.JHeptRoomInfos.moduleNum = response.data.device_switch.moduleNum;
                        this.JHeptRoomInfos.interfaceNum = response.data.device_switch.interfaceNum;
                        this.JHeptRoomInfos.g40Num = response.data.device_switch.g40Num;
                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
                // this.resetForm();
                this.JHeptRoomEditVisible = true;
            } else if (row.eqptType === '4') {
                this.$http.get('resman/device/location/' + row.deviceId).then((response) => {
                    console.log(response)
                    if (response.code === 0) {
                        //device_base
                        this.FHQeptRoomInfos.snNum = response.data.device_base.snNum;
                        this.FHQeptRoomInfos.state = response.data.device_base.state;
                        this.FHQeptRoomInfos.brandId = response.data.device_base.brandId;
                        this.FHQeptRoomInfos.brandName = response.data.device_base.brandName;
                        this.FHQeptRoomInfos.deviceId = response.data.device_base.deviceId;
                        this.FHQeptRoomInfos.eqptType = response.data.device_base.eqptType;
                        this.FHQeptRoomInfos.modelId = response.data.device_base.modelId;
                        this.FHQeptRoomInfos.modelName = response.data.device_base.modelName;
                        this.FHQeptRoomInfos.typeName = response.data.device_base.typeName;
                        //device_location
                        this.FHQeptRoomInfos.cabinetCode = response.data.device_location.cabinetCode;
                        this.FHQeptRoomInfos.cabinetId = response.data.device_location.cabinetId;
                        this.FHQeptRoomInfos.deviceId = response.data.device_location.deviceId;
                        this.FHQeptRoomInfos.endNum = response.data.device_location.endNum;
                        this.FHQeptRoomInfos.roomId = response.data.device_location.roomId;
                        this.FHQeptRoomInfos.roomName = response.data.device_location.roomName;
                        this.FHQeptRoomInfos.snNum = response.data.device_location.snNum;
                        this.FHQeptRoomInfos.startNum = response.data.device_location.startNum;
                        this.FHQeptRoomInfos.state = response.data.device_location.state;

                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
                // this.resetForm();
                this.FHQeptRoomEditVisible = true;
            }
        },
        //服务器提交
        submitForm: function() {
            if (this.eptRoomInfos.ip1 === "" && this.eptRoomInfos.ip2 === "" && this.eptRoomInfos.ip3 === "" && this.eptRoomInfos.ip4 === "") {
                var ser = {
                    device_base: {
                        "snNum": this.eptRoomInfos.snNum,
                        "state": this.eptRoomInfos.state,
                        "deviceId": this.eptRoomInfos.deviceId,
                        "brandName": this.eptRoomInfos.brandName,
                        "eqptSpec": this.eptRoomInfos.eqptSpec,
                        "eqptType": this.eptRoomInfos.eqptType,
                        "modelId": this.eptRoomInfos.modelId,
                        "modelName": this.eptRoomInfos.modelName,
                        "typeName": this.eptRoomInfos.typeName
                    },
                    device_ip: [],
                    device_location: {
                        "cabinetCode": this.eptRoomInfos.cabinetCode,
                        "startNum": this.eptRoomInfos.startNum,
                        "endNum": this.eptRoomInfos.endNum,
                        "cabinetId": this.eptRoomInfos.cabinetId,
                        "remarks": this.eptRoomInfos.remarks,
                        "roomId": this.eptRoomInfos.roomId,
                        "roomName": this.eptRoomInfos.roomName,
                        "state": this.eptRoomInfos.state,
                        "deviceId": this.eptRoomInfos.deviceId,
                    },
                    device_server: {
                        "deviceId": this.eptRoomInfos.deviceId,
                        "purpose": this.eptRoomInfos.purpose,
                        "ipmiAddr": this.eptRoomInfos.ipmiAddr,
                        "manageIp": this.eptRoomInfos.manageIp,
                        "sysModel": this.eptRoomInfos.sysModel,
                        "hostName": this.eptRoomInfos.hostName,
                        "serviceCode": this.eptRoomInfos.serviceCode,
                    }
                }
            } else {
                var ser = {
                    device_base: {
                        "snNum": this.eptRoomInfos.snNum,
                        "state": this.eptRoomInfos.state,
                        "deviceId": this.eptRoomInfos.deviceId,
                        "brandName": this.eptRoomInfos.brandName,
                        "eqptSpec": this.eptRoomInfos.eqptSpec,
                        "eqptType": this.eptRoomInfos.eqptType,
                        "modelId": this.eptRoomInfos.modelId,
                        "modelName": this.eptRoomInfos.modelName,
                        "typeName": this.eptRoomInfos.typeName
                    },
                    device_ip: [
                        {
                            "deviceId": this.eptRoomInfos.deviceId,
                            "ip": this.eptRoomInfos.ip1,
                            "id": this.eptRoomInfos.id1,
                            "useTag": this.eptRoomInfos.useTag1
                        },
                        {
                            "deviceId": this.eptRoomInfos.deviceId,
                            "ip": this.eptRoomInfos.ip2,
                            "id": this.eptRoomInfos.id2,
                            "useTag": this.eptRoomInfos.useTag2
                        },
                        {
                            "deviceId": this.eptRoomInfos.deviceId,
                            "ip": this.eptRoomInfos.ip3,
                            "id": this.eptRoomInfos.id3,
                            "useTag": this.eptRoomInfos.useTag3
                        },
                    ],
                    device_location: {
                        "cabinetCode": this.eptRoomInfos.cabinetCode,
                        "startNum": this.eptRoomInfos.startNum,
                        "endNum": this.eptRoomInfos.endNum,
                        "cabinetId": this.eptRoomInfos.cabinetId,
                        "remarks": this.eptRoomInfos.remarks,
                        "roomId": this.eptRoomInfos.roomId,
                        "roomName": this.eptRoomInfos.roomName,
                        "state": this.eptRoomInfos.state,
                        "deviceId": this.eptRoomInfos.deviceId,
                    },
                    device_server: {
                        "deviceId": this.eptRoomInfos.deviceId,
                        "purpose": this.eptRoomInfos.purpose,
                        "ipmiAddr": this.eptRoomInfos.ipmiAddr,
                        "manageIp": this.eptRoomInfos.manageIp,
                        "sysModel": this.eptRoomInfos.sysModel,
                        "hostName": this.eptRoomInfos.hostName,
                        "serviceCode": this.eptRoomInfos.serviceCode,
                    }
                }
            }
            this.$http.put('/resman/device/location', ser).then((response) => {
                if (response.code === 0) {
                    console.log(response)
                    this.showMessage('修改成功!', 'success');
                    this.getEptRoomInfos('all');
                    this.eptRoomEditVisible = false;
                } else {
                    console.log(response.msg);
                    this.showMessage('系统错误!', 'error');
                }
            })
        },
        //交换机提交
        JHsubmitForm: function() {
            var jh = {
                device_base: {
                    "snNum": this.JHeptRoomInfos.snNum,
                    "state": this.JHeptRoomInfos.state,
                    "brandId": this.JHeptRoomInfos.brandId,
                    "brandName": this.JHeptRoomInfos.brandName,
                    "deviceId": this.JHeptRoomInfos.deviceId,
                    "eqptSpec": this.JHeptRoomInfos.eqptSpec,
                    "eqptType": this.JHeptRoomInfos.eqptType,
                    "modelId": this.JHeptRoomInfos.modelId,
                    "modelName": this.JHeptRoomInfos.modelName,
                    "specName": this.JHeptRoomInfos.specName,
                    "typeName": this.JHeptRoomInfos.typeName
                },
                device_location: {
                    "roomId": this.JHeptRoomInfos.roomId,
                    "cabinetCode": this.JHeptRoomInfos.cabinetCode,
                    "startNum": this.JHeptRoomInfos.startNum,
                    "endNum": this.JHeptRoomInfos.endNum,
                    "cabinetId": this.JHeptRoomInfos.cabinetId,
                    "remarks": this.JHeptRoomInfos.remarks,
                    "state": this.JHeptRoomInfos.state,
                    "deviceId": this.JHeptRoomInfos.deviceId,
                    "roomName": this.JHeptRoomInfos.roomName,
                    "snNum": this.JHeptRoomInfos.snNum,

                },
                device_switch: {
                    "purpose": this.JHeptRoomInfos.purpose,
                    "manageIp": this.JHeptRoomInfos.manageIp,
                    "hostName": this.JHeptRoomInfos.hostName,
                    "moduleNum": this.JHeptRoomInfos.moduleNum,
                    "interfaceNum": this.JHeptRoomInfos.interfaceNum,
                    "g40Num": this.JHeptRoomInfos.g40Num,
                    "deviceId": this.JHeptRoomInfos.deviceId
                }
            }
            this.$http.put('/resman/device/location', jh).then((response) => {
                if (response.code === 0) {
                    console.log(response)
                    this.showMessage('修改成功!', 'success');
                    this.getEptRoomInfos('all');
                    this.JHeptRoomEditVisible = false;
                } else {
                    console.log(response.msg);
                    this.showMessage('系统错误!', 'error');
                }
            })
        },
        //防火墙提交
        FirwallSubmint: function() {
            var fir = {
                device_base: {
                    "snNum": this.FHQeptRoomInfos.snNum,
                    "state": this.FHQeptRoomInfos.state,
                    "brandId": this.FHQeptRoomInfos.brandId,
                    "brandName": this.FHQeptRoomInfos.brandName,
                    "deviceId": this.FHQeptRoomInfos.deviceId,
                    "eqptType": this.FHQeptRoomInfos.eqptType,
                    "modelId": this.FHQeptRoomInfos.modelId,
                    "modelName": this.FHQeptRoomInfos.modelName,
                    "typeName": this.FHQeptRoomInfos.typeName
                },
                device_location: {
                    "cabinetCode": this.FHQeptRoomInfos.cabinetCode,
                    "cabinetId": this.FHQeptRoomInfos.cabinetId,
                    "deviceId": this.FHQeptRoomInfos.deviceId,
                    "endNum": this.FHQeptRoomInfos.endNum,
                    "roomId": this.FHQeptRoomInfos.roomId,
                    "roomName": this.FHQeptRoomInfos.roomName,
                    "snNum": this.FHQeptRoomInfos.snNum,
                    "state": this.FHQeptRoomInfos.state,
                    "startNum": this.FHQeptRoomInfos.startNum
                }
            }
            this.$http.put('/resman/device/location', fir).then((response) => {
                if (response.code === 0) {
                    console.log(response)
                    this.showMessage('修改成功!', 'success');
                    this.getEptRoomInfos('all');
                    this.FHQeptRoomEditVisible = false;
                } else {
                    console.log(response.msg);
                    this.showMessage('系统错误!', 'error');
                }
            })
        },
        //详情信息
        detInfo(row) {
            if (row.eqptType === '1') {
                this.$http.get('/resman/map/server/' + row.deviceId).then((response) => {
                    console.log(response)
                    if (response.code === 0) {
                        this.detailedInfos.snNum = response.data.deviceBase.snNum;
                        this.detailedInfos.typeName = response.data.deviceBase.typeName;
                        this.detailedInfos.brandName = response.data.deviceBase.brandName;
                        this.detailedInfos.modelName = response.data.deviceBase.modelName;
                        this.detailedInfos.specName = response.data.deviceBase.specName;
                        this.detailedInfos.state = response.data.deviceBase.state;
                        console.log(this.detailedInfos.state)

                        this.detailedInfos.serviceCode = response.data.deviceServer.serviceCode;
                        this.detailedInfos.brandName0 = response.data.deviceUnit[0].brandName;
                        this.detailedInfos.amount0 = response.data.deviceUnit[0].amount;
                        this.detailedInfos.capacity0 = response.data.deviceUnit[0].capacity;
                        this.detailedInfos.brandName1 = response.data.deviceUnit[1].brandName;
                        this.detailedInfos.amount1 = response.data.deviceUnit[1].amount;
                        this.detailedInfos.capacity1 = response.data.deviceUnit[1].capacity;
                        this.detailedInfos.brandName2 = response.data.deviceUnit[2].brandName;
                        this.detailedInfos.amount2 = response.data.deviceUnit[2].amount;
                        this.detailedInfos.capacity2 = response.data.deviceUnit[2].capacity;
                        this.detailedInfos.brandName3 = response.data.deviceUnit[3].brandName;
                        this.detailedInfos.amount3 = response.data.deviceUnit[3].amount;
                        this.detailedInfos.capacity3 = response.data.deviceUnit[3].capacity;
                        this.detailedInfos.typeName4 = response.data.deviceUnit[4].typeName;
                        this.detailedInfos.brandName4 = response.data.deviceUnit[4].brandName;
                        this.detailedInfos.capacity4 = response.data.deviceUnit[4].capacity;
                        this.detailedInfos.amount4 = response.data.deviceUnit[4].amount;
                        this.detailedInfos.typeName5 = response.data.deviceUnit[5].typeName;
                        this.detailedInfos.brandName5 = response.data.deviceUnit[5].brandName;
                        this.detailedInfos.capacity5 = response.data.deviceUnit[5].capacity;
                        this.detailedInfos.amount5 = response.data.deviceUnit[5].amount;
                        this.detailedInfos.typeName6 = response.data.deviceUnit[6].typeName;
                        this.detailedInfos.brandName6 = response.data.deviceUnit[6].brandName;
                        this.detailedInfos.amount6 = response.data.deviceUnit[6].amount;
                        this.detailedInfos.capacity6 = response.data.deviceUnit[6].capacity;
                        this.detailedInfos.typeName7 = response.data.deviceUnit[7].typeName;
                        this.detailedInfos.brandName7 = response.data.deviceUnit[7].brandName;
                        this.detailedInfos.amount7 = response.data.deviceUnit[7].amount;
                        this.detailedInfos.capacity7 = response.data.deviceUnit[7].capacity;
                        this.detailedInfos.hostName = response.data.deviceServer.hostName;
                        this.detailedInfos.purpose = response.data.deviceServer.purpose;
                        this.detailedInfos.ipmiAddr = response.data.deviceServer.ipmiAddr;
                        this.detailedInfos.manageIp = response.data.deviceServer.manageIp;
                        this.detailedInfos.sysModel = response.data.deviceServer.sysModel;
                        this.detailedInfos.ip0 = response.data.deviceIp[0].ip;
                        this.detailedInfos.ip1 = response.data.deviceIp[1].ip;
                        this.detailedInfos.ip2 = response.data.deviceIp[2].ip;

                    } else {
                        console.log(response.statusText)
                    }
                })
                this.DetailedInformation = true;
            } else if (row.eqptType === '2') {
                this.$http.get('/resman/map/switch/' + row.deviceId).then((response) => {
                    console.log(response)
                    if (response.code === 0) {
                        this.JHdetailedInfos.snNum = response.data.deviceBase.snNum;
                        this.JHdetailedInfos.typeName = response.data.deviceBase.typeName;
                        this.JHdetailedInfos.modelName = response.data.deviceBase.modelName;
                        this.JHdetailedInfos.state = response.data.deviceBase.state;
                        this.JHdetailedInfos.brandName = response.data.deviceBase.brandName;
                        this.JHdetailedInfos.specName = response.data.deviceBase.specName;

                        this.JHdetailedInfos.interfaceNum = response.data.deviceSwitch.interfaceNum;
                        this.JHdetailedInfos.g40Num = response.data.deviceSwitch.g40Num;
                        this.JHdetailedInfos.moduleNum = response.data.deviceSwitch.moduleNum;
                        this.JHdetailedInfos.hostName = response.data.deviceSwitch.hostName;
                        this.JHdetailedInfos.manageIp = response.data.deviceSwitch.manageIp;
                        this.JHdetailedInfos.purpose = response.data.deviceSwitch.purpose;
                        this.JHdetailedInfos.infos = response.data.deviceSwitchSub
                    } else {
                        console.log(response.statusText)
                    }
                })
                this.JHDetailedInformation = true;
            } else if (row.eqptType === '4') {
                this.$http.get('/resman/map/firewall/' + row.deviceId).then((response) => {
                    console.log(response)
                    if (response.code === 0) {
                        this.firWalldetailedInfos.snNum = response.data.deviceBase.snNum;
                        this.firWalldetailedInfos.typeName = response.data.deviceBase.typeName;
                        this.firWalldetailedInfos.modelName = response.data.deviceBase.modelName;
                        this.firWalldetailedInfos.state = response.data.deviceBase.state;
                        this.firWalldetailedInfos.brandName = response.data.deviceBase.brandName;
                        this.firWalldetailedInfos.specName = response.data.deviceBase.specName;
                    } else {
                        console.log(response.statusText)
                    }
                })
                this.FirWallDetailedInformation = true;
            }
        },

        //设备状态
        eqptState() {
            let _url = '/sys/dictionary/listById/eqpt_state';
            this.$http.get(_url)
                .then((response) => {
                    console.log(response)
                    if (response.code === 0) {
                        this.eqptSpecList = response.data;
                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },
        // 获取设备信息
        getDictInfo() {
            this.$http.get('http://10.247.3.29:5001/sys/dictionary/listById/eqpt_type')
                .then((response) => {
                    if (response.code === 0) {
                        this.roomListData = response.data;
                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },
        //下架
        offLine(row) { 
            console.log(row.deviceId)
            console.log(row.eqptType)
            this.$http.get('/resman/device/location/shelvesDevice/'+row.deviceId+'/'+row.eqptType).then((response)=>{
               console.log(response)
               this.getEptRoomInfos('all');
            })
        },
        // 删除设备相关操作
        deleteConfirm(row) {
            const h = this.$createElement;
            this.$msgbox({
                title: '删除设备',
                message: h('p', null, [
                    h('span', null, '是否删除 '),
                    h('span', { style: 'color: #20A0FF;font-size:1.2em;font-weight:bold' }, row.deviceId),
                    h('span', null, ' 这个设备？'),
                ]),
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then((action) => {
                if (action === 'confirm') {
                    this.$http.delete('/resman/device/deviceDel/' + row.deviceId).then((response) => {
                        if (response.code === 0) {
                            this.getEptRoomInfos();
                            this.showMessage('删除成功!', 'success');
                        } else {
                            console.log(response.msg);
                        }
                    }).catch((response) => {
                        console.log(response)
                    })
                } else {
                    showMessage('已取消删除', 'info');
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 分页按钮
        handleCurrentChange(val) {
            this.pageConfig.curPage = val;
            this.pageChange(val);
        },
        // 分页
        pageChange(page) {
            this.infos.pageData = this.infos.re_tableData.slice((page - 1) * this.pageConfig.size, page * this.pageConfig.size);
        },
        showMessage(msg, type) {
            this.$message({
                message: msg,
                type: type
            });
        },
        showWarning(msg, title) {
            this.$alert(msg, title, {
                showConfirmButton: false,
                showCancelButton: true,
                cancelButtonText: '关闭',
            });
        },
        // 初始化
        resetForm() {
            this.eptRoomInfos = {
                state: '',
                snNum: '',
                roomId: '',
                cabinetCode: '',
                startNum: '',
                endNum: '',
                purpose: '',
                ipmiAddr: '',
                manageIp: '',
                sysModel: '',
                hostName: '',
                ip1: '',
                ip2: '',
                ip3: '',
                ip4: '',
            };
            this.JHeptRoomInfos ={
                state: '',
                snNum: '',
                roomId: '',
                cabinetCode: '',
                startNum: '',
                endNum: '',
                purpose: '',
                ipmiAddr: '',
                manageIp: '',
                sysModel: '',
                hostName: '',
            };
            this.FHQeptRoomInfos = {
                state: '',
                snNum: '',
                roomId: '',
                roomName: '',
                cabinetCode: '',
                startNum: '',
                endNum: '',
            };
            this.infos ={};
            if (this.$refs['eptRoomInfos']) {
                this.$refs['eptRoomInfos'].resetFields();
            }
        },
        a(val) {
            console.log(val);
        }
    }
}
</script>

<style>
.cpe_list .el-row {
    margin-bottom: 20px;
}

.cell_box1 {
    cursor: pointer;
    display: block;
    width: 1.5em;
    height: 1.5em;
    font-size: .6em;
    text-align: center;
    line-height: 1em;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}

.cell_box-up1 {
    background-color: #66CC00;
}

.cell_box-down1 {
    background-color: #FA6634;
}

.cell_box-unplugin1 {
    background-color: #999999;
}
</style>